<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head>

<body>

<canvas width="1000" style="#" height="500" id="huabu"></canvas>
</body>
<script>
	var huabu=document.getElementById('huabu');
	var hua=huabu.getContext('2d');
	//hua.fillStyle='#fec';
	//hua.fillRect(0,0,1000,500);
	
	//---------------脸轮廓-------------------------
	
	hua.beginPath();
	hua.fillStyle='#fec'
	hua.moveTo(240,0)
	hua.quadraticCurveTo(460,700,670,0)
	
	hua.fill();
	hua.stroke();
	hua.closePath();
	
	//--------------右边眼睛和眉毛---------------------------
	//--------右边眉毛------------------
	hua.beginPath();
	hua.fillStyle='#666'
	hua.moveTo(485,50)
	hua.quadraticCurveTo(486,10,650,40)
	hua.quadraticCurveTo(486,60,485,50)
	hua.fill();
	hua.closePath();
	
	//-------右边眼睛外沿------------------
	hua.beginPath();
	hua.moveTo(500,100)
	hua.lineWidth=2;
	hua.fillStyle='white'
	hua.quadraticCurveTo(515,60,600,90)
	hua.quadraticCurveTo(560,120,500,100)
	hua.stroke();
	hua.fill();
	hua.closePath();
	
	//----------右边眼球--------------------
	hua.beginPath()
	var gad=hua.createRadialGradient(545,93,1,545,93,14);
	gad.addColorStop(0,'white')
	
	gad.addColorStop(1,'#000')
	hua.fillStyle=gad;
	hua.arc(545,93,14,0,2*Math.PI,true);
	hua.fill();
	//----------------------------------------------
	
	//---------------左边眼睛和眉毛------------------------------
	
	//--------左边眉毛------------------
	hua.beginPath();
	hua.fillStyle='#666'
	hua.moveTo(425,50)
	hua.quadraticCurveTo(424,10,260,40)
	hua.quadraticCurveTo(424,60,425,50)
	hua.fill();
	hua.closePath();
	
	
	//-------左边眼睛外沿------------------
	hua.beginPath();
	hua.moveTo(415,100)
	hua.lineWidth=2;
	hua.fillStyle='white'
	hua.quadraticCurveTo(400,60,315,90)
	hua.quadraticCurveTo(375,120,415,100)
	
	hua.stroke();
	hua.fill();
	hua.closePath();
	
	//----------左边眼球--------------------
	hua.beginPath()
	var gad=hua.createRadialGradient(375,93,1,375,93,14);
	gad.addColorStop(0,'white')
	
	gad.addColorStop(1,'#000')
	hua.fillStyle=gad;
	hua.arc(375,93,14,0,2*Math.PI,true);
	hua.fill();
	hua.closePath();
	//----------------------------------------------
	
	//------------鼻梁------------------------------
	
	hua.beginPath();
	var gad=hua.createLinearGradient(430,200,485,200)
	gad.addColorStop(0,'#fc9')
	gad.addColorStop(0.5,'#ffc')
	gad.addColorStop(1,'#fc9')
	hua.fillStyle=gad;
	hua.moveTo(440,60)
	hua.quadraticCurveTo(450,80,430,210)
	hua.quadraticCurveTo(460,220,490,210)
	hua.quadraticCurveTo(465,80,475,60)
	//hua.stroke();
	hua.fill();
	hua.closePath();
	//-------------嘴巴------------------------------------
	hua.beginPath();
	var gad=hua.createLinearGradient(375,250,375,290)
	gad.addColorStop(0,'red');
	gad.addColorStop(0.45,'#fff');
	gad.addColorStop(0.5,'#000');
	gad.addColorStop(0.55,'#fff');
	gad.addColorStop(1,'red');
	
	hua.fillStyle=gad;
	hua.moveTo(385,270);
	hua.quadraticCurveTo(460,320,535,270)
	hua.lineTo(480,250)
	hua.quadraticCurveTo(460,260,440,250)
	hua.lineTo(385,270)
	hua.quadraticCurveTo(460,280,535,270)
	hua.stroke();
	hua.fill();
	hua.closePath();
	
	//------------腮红----------------------------
	
	
</script>
</html>